<template>
  <div>
    <h1>列表数据</h1>
    <my-list :list="list">
      <template #default="{ id }">
        <button @click="del(id)">删除</button>
      </template>
    </my-list>
    <my-list :list="goods">
       <template #default="{ id }">
      <button>编辑</button>
      <button>查看信息</button>
       <button @click="del2(id)">删除</button>
      </template>
    </my-list>
  </div>
</template>

<script>
import MyList from './components/MyList.vue'
export default {
  components: { MyList },
  data () {
    return {
      list: [
      { id: 2, name: '小新🥤'},
      { id: 3, name: '美伢🧉'},
      { id: 7, name: '正男🧃'},
      { id: 4, name: '小葵🥛'},
      { id: 5, name: '妮妮🍧'},
      { id: 6, name: '风间🍹'},
      { id: 8, name: '阿呆🧋'},
     ],
     goods: [
      { id: 2, name: '汉堡🍔'},
      { id: 3, name: '薯条🍟'},
      { id: 7, name: '布丁🍮'},
      { id: 4, name: '蛋糕🧁'},
      { id: 5, name: '米饼🍘'},
      { id: 6, name: '披萨🍕'},
      { id: 8, name: '曲奇🍪'},
     ]
    }
  },
  methods: {
    del (id) {
      // console.log(id)
      this.list = this.list.filter(item => item.id !== id)
    },
    del2 (id) {
      // console.log(id)
      this.goods = this.goods.filter(item => item.id !== id)
    }
  }
}
</script>

<style>

</style>